<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>淘抢购—ajax-换一换</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>

	<body>
		<div class="container">
			<div class="list-top">
				<a href="#">
					<img src="img/taoqianggou.png" alt="" />
				</a>
				<div class="list-right">
					<button id="btn">换一换</button>
					<a href="#">更多<span>></span></a>
				</div>
			</div>
			<div id="list"></div>
		</div>
		<script>
			//初始值
			var page = 1;
			//给换一换加点击事件
			var btn = document.querySelector("#btn");
			btn.addEventListener('click', function() {
				if(page < 3) {
					//让page加1
					page++;
					//解决追加问题
					document.querySelector("#list").innerHTML = "";
					//执行loadXMLDoc() 方法
					loadXMLDoc();
				} else {
					page = 1;
					document.querySelector("#list").innerHTML = "";
					//执行loadXMLDoc() 方法
					loadXMLDoc();
				}
			})

			function loadXMLDoc() {
				var xmlhttp;
				if(window.XMLHttpRequest) {
					//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
					xmlhttp = new XMLHttpRequest();
				} else {
					// IE6, IE5 浏览器执行代码
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function() {
					if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
						var json = xmlhttp.responseText;
						//转换成数组和对象
						json = JSON.parse(json);
						//console.log(json);
						for(var i = 0; i < json.shop.length; i++) {
							console.log(json.shop[i]);
							//创建节点  img
							var img = document.createElement('img');
							img.src = json.shop[i].pic;
							//创建节点  a
							var img_a = document.createElement('a');
							//setAttribute() 方法添加指定的属性，并为其赋指定的值。
							img_a.setAttribute("href","#");
							img_a.appendChild(img);
							//创建节点  div
							var img_div = document.createElement('div');
							img_div.classList.add("img");
							img_div.appendChild(img_a);
							//创建节点  h4
							var h4 = document.createElement('h4');
							h4.innerHTML = json.shop[i].title;
							//创建节点  p
							var p = document.createElement('p');
							p.innerHTML = json.shop[i].subtitle;
							//创建节点  div
							var progress1 = document.createElement('div');
							progress1.classList.add("progress1");
							//创建节点  div
							var progress = document.createElement('div');
							progress.classList.add("progress");
							progress.appendChild(progress1);
							//创建节点  div
							var desc = document.createElement('div');
							desc.classList.add("desc");
							//创建节点  span
							var per = document.createElement('span');
							per.classList.add("percentage");
							per.innerHTML = json.shop[i].percentage;
							//创建节点  span
							var letter = document.createElement('span');
							letter.classList.add("letter");
							letter.innerHTML = json.shop[i].letter;
							desc.appendChild(per);
							desc.appendChild(letter);

							//创建节点  div
							var extra = document.createElement('div');
							extra.classList.add("extra");
							//创建节点  span
							var yan = document.createElement('span');
							yan.classList.add("yan");
							yan.innerHTML = json.shop[i].yan;
							//创建节点  span
							var cur = document.createElement('span');
							cur.classList.add("cur");
							cur.innerHTML = json.shop[i].cur;
							//创建节点  span
							var price = document.createElement('span');
							price.classList.add("price");
							price.innerHTML = json.shop[i].price;
							extra.appendChild(yan);
							extra.appendChild(cur);
							extra.appendChild(price);
							//创建节点  a
							var a = document.createElement('a');
							//setAttribute() 方法添加指定的属性，并为其赋指定的值。
							a.setAttribute("href","#");
							a.appendChild(h4);
							a.appendChild(p);
							a.appendChild(progress);
							a.appendChild(desc);
							a.appendChild(extra);
							//创建节点  .info
							var info = document.createElement('div');
							info.classList.add("info");
							info.appendChild(a);
							//创建节点  .shop
							var shop = document.createElement('div');
							shop.classList.add("shop");
							shop.appendChild(img_div);
							shop.appendChild(info);
							//把3个div标签追加到最大的div#list标签
							var div = document.querySelector("#list");
							div.appendChild(shop);

						}
					}
				}
				xmlhttp.open("GET", page + ".json", true);
				xmlhttp.send();
			}
			//执行一遍ajax方法
			loadXMLDoc();
		</script>
	</body>

</html>